<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />

</head>

<body>
    <div class="main">
        <div class="row">
            <input class="input" type="text" id = "inputtext" onkeyup ="keyup(event)"/>
            <input type="button" name="bt" value ="确认1" onclick = "handleClick(event)" />
            <input type="button" name="bt" id = "button2" value = "确认2" onclick = "handleClick()" />
        </div>
        <div id = "todogroup">
            <!-- 这里做to do  -->
                <!-- <div id="todo0"><input type="checkbox" name="todocheck">吃饭<button type="button(0)" >删除</button></div>
                <div>睡觉</div> -->

        </div>
        <!-- <span style="color:blue;">asd&nbsp;&nbsp;asd</span> -->
        <!-- <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')"></div> -->
    </div>
</body>
<script lang="javascript">
    var intCnt=0;
    function init(){
        console.log("xxx");
        document.getElementById("button2").onclick=handleClick;
        console.log('xxxxxx');
    }
    function keyup(e)
    {
        console.log(e);
        if(e.keyCode==13)
        {
            handleClick();
        }
    }
    function handleClick(e){
    console.log('handleClick');
    console.log(e);
    // var temp = document.getElementById("inputtext");
    // console.log(temp.value);
    // document.getElementsByClassName("main")[0].style="background-color: #333333;";
    var temp = getValue();
    // document.getElementById("todogroup").innerHTML += "<div>"+temp+"</div>"
    // var div = document.createElement('div');
    // div.innerText=temp;
    // document.getElementById("todogroup").append(div);
    var div = document.createElement('div');

document.getElementById("todogroup").innerHTML += "<div class='item' id ='todo"
+ intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
+ temp + "</div><button class='item-del' type='button'onclick='deletByIndex(" + intCnt + ")'>删除</button></div>";
document.getElementById("inputtext").value = "";
intCnt++;
}

    init();
    function getValue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }

    function deletByIndex(index){
        document.getElementById("todo"+index).remove();
    }

  
    
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .main {
        /* background-color: aqua;
        height: 200px; */
        padding: 8px;
        border: 1px solid #333333;
        border-radius: 8px;
    }
    .row{
        display:flex;
    }
    .item{
        display: flex;
        align-items: center;
        margin: 6px;
        padding :3px;
    }
    .item-value{
        flex-grow: 1;
        color:#000000;
    }
    .item-del{
        color: aliceblue;
        background-color: red;
        border:0px;
        opacity: 0;
    }
    .item:hover .item-del{
        opacity: 1;
    }
    .input{
        padding:8px;
        outline: none;
        border: 2px solid #2fcbe3;
    }
    .input:focus{
        box-shadow: 0px 0px 10px rgb(90, 188, 240);
        border: 2px solid rgb(90, 188, 240);
    }

</style>

</html>